<template>
  <div class="header">
    <div class="left-header">
      <img src="../assets/vue.svg" alt="Logo" class="logo-img"/>
      <span class="logo-title">协创视界</span>
    </div>
    <div class="right-header">
      <a-space size="large">
        <a-button shape="circle" class="header-icon">
          <icon-settings/>
        </a-button>
        <a-button shape="circle" class="header-icon">
          <icon-notification/>
        </a-button>
        <a-button shape="circle" class="header-icon">
          <icon-moon/>
        </a-button>
        <a-dropdown trigger="hover">
          <a-avatar :size="28" class="avatar">
            <img alt="avatar" :src=" userStore.getLoginUser()?.avatar"/>
          </a-avatar>
          <template #content>
            <a-doption @click="toCenter()">
              <template #icon>
                <icon-user/>
              </template>
              个人中心
            </a-doption>
            <a-doption style="color: red" @click="userStore.logout()">
              <template #icon>
                <icon-export/>
              </template>
              退出登录
            </a-doption>
          </template>
        </a-dropdown>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import {IconSettings, IconNotification, IconMoon} from '@arco-design/web-vue/es/icon';
import {useUserStore} from "../stores/useUserStore";
import {useRouter} from "vue-router";

const userStore = useUserStore()
const router = useRouter()

const toCenter = ()=>{
  router.push({
    path:"/center"
  })
}

</script>

<style scoped>
.header {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  color: #4e5969;
}

.left-header {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 32px;
  margin-right: 12px;
}

.logo-title {
  font-size: 18px;
  font-weight: 600;
  color: #165DFF;
}

.right-header {
  display: flex;
  align-items: center;
  padding-right: 5rem;
}

.header-icon {
  background-color: rgba(247, 248, 250, 0.95);
  color: #86909c;
  border: none;
  font-size: 18px;
  transition: all 0.2s ease;
}

.header-icon:hover {
  background-color: rgba(22, 93, 255, 0.1);
  color: #165DFF;
}

.avatar {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.avatar:hover {
  transform: scale(1.05);
}
</style>